
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

/* 浏览器body标签会有一个默认外边距，一般默认为8px  */
body {
    margin: 0;
    font-size: 14px;
    background-color: rgba(0, 0, 0, .04);
}

a {
    text-decoration: none;
}

nav {
    /* 菜单的颜色一般会填充到导航栏元素中 */
    background-color: #ffffff;
    height: 60px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .05);
    margin-bottom: 20px;
}

/* ul标签默认为块级元素标签 */
/* 浏览器ul标签默认会有一个上下外边距和一个左内边距 */
ul {
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

li {
    /* 为了使菜单的可能存在的下拉菜单，可以自动绝对布局于对应菜单之下，这里让菜单项位置为相对 */
    position: relative;
}

.container {
    width: 960px;
    margin: 20px auto;
}

.active>a {
    color: #1890ff !important;
}



.menu>li {
    /* 这里我们通过让li显示为inline-block,而不是float：left，因为这样可以不破坏父元素的高度，将ul可以根据流式布局
        默认撑满nav元素，这样背景色就可以看得出来，而不必因为li浮动了，导致ul也要浮动
        */
    display: inline-block;
    border-top: 2px solid transparent;
    /* 从ant design摘来的过渡动画效果*/
    transition: color .3s cubic-bezier(.645, .045, .355, 1), border-color .3s cubic-bezier(.645, .045, .355, 1), background .3s cubic-bezier(.645, .045, .355, 1), padding .15s cubic-bezier(.645, .045, .355, 1);
}

.menu>li:hover,
.menu>.active {
    border-top: 2px solid #1890ff;

}

.menu>li:hover .more {
    transform: rotate(180deg);
    margin-top: -12px;
}

.menu>li:hover .dropdown-menu {
    display: block;
}

.menu>li>a {
    display: inline-block;
    position: relative;
    font-size: 16px;
    color: rgba(0, 0, 0, .65);
    line-height: 24px;
    padding: 16px 20px 18px 20px;
}

.menu>li>a:hover {
    color: #1890ff;
}

.dropdown-menu {
    display: none;
    position: absolute;
    min-width: 160px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.17);
    padding: 5px 0;
    white-space: nowrap;
    /* 为了不让东西挡到下拉菜单，需要设置一下z-index*/
    z-index: 1050;
}

.dropdown-menu>li {
    display: block;
}

.dropdown-menu>li>a {
    display: block;
    color: rgba(0, 0, 0, .65);
    line-height: 22px;
    padding: 9px 20px;
}

.dropdown-menu>li>a:hover {
    background-color: rgba(0, 0, 0, .04);
    color: #1890ff;
}

.more {
    content: '';
    width: 0;
    height: 0;
    border-style: solid dashed dashed;
    border-color: #fff transparent transparent;
    overflow: hidden;
    cursor: pointer;
    transition: all .2s;
    -webkit-transition: all .2s;
    position: absolute;
    top: 50%;
    right: 3px;
    margin-top: -3px;
    border-width: 6px;
    border-top-color: rgba(0, 0, 0, .65);
}